<template>
  <div class="content">
    <div class="top">
      <!-- <img
        :src="orderType !== 'type' ? goodsForm.goodsImage : goods.goodsImg"
        mode="scaleToFill"
      />-->
      <img v-if="orderType === 'type'" :src="goods.goodsImg" mode="scaleToFill" />
      <img v-else :src="form.goodsImg" mode="scaleToFill" />
      <span>{{form.shopName}}</span>
    </div>
    <div class="zhan"></div>
    <div class="list">
      <div class="cont">
        <span>商品类型</span>
        <div class="right">
          <picker
            class="filter-picker"
            :range="swiperList2"
            range-key="goodsTypeName"
            :value="shopTypeIndex"
            :disabled="orderType !== 'type'"
            @change="handleStateChange"
          >
            <span
              :class="goodsTypeName === '请选择' ? 'pitch-on' : ''"
            >{{goodsTypeName}}</span>
          </picker>
          <i-icon type="enter" size="16" color="#838383" />
        </div>
      </div>
    </div>
    <div class="list2">
      <div class="cont" v-for="(item,index) in formList" :key="index">
        <div v-if="!item.isShowMoney">
          <span>{{item.label}}</span>
          <div class="right" v-if="item.isInput">
            <input
              type="number"
              v-model="form[item.key]"
              placeholder="请输入"
              :disabled="item.disabled"
            />
            <span>{{item.slot}}</span>
          </div>
          <div class="right" v-else>
            <picker
              class="filter-picker"
              :range="goodsExpressList"
              range-key="goodsExpressName"
              :value="goodsExpressIndex"
              :disabled="item.disabled"
              @change="handleExpressChange"
            >
              <span
                :class="goodsExpressName === '请选择' ? 'pitch-on' : ''"
              >{{goodsExpressName}}</span>
            </picker>
            <i-icon type="enter" size="16" color="#838383" />
          </div>
        </div>
        <div class="showPre" v-if="item.isShowMoney">
          <div>
            <span>{{item.label}}</span>
            <input
              type="number"
              v-model="form[item.key]"
              placeholder="请输入"
              :disabled="item.disabled"
            />
            <span>{{item.slot}}</span>
          </div>
          <p>{{item.showMoneyValue ? item.showMoneyValue : ''}}元</p>
        </div>
      </div>
    </div>
    <p
      class="hintText"
    >例：如果您的赊货锁额比例设置为40%，供货价￥100.00，商家每购买一件您的商品需要被锁定余额，￥40.00，纸质商家售出或退货；如到达赊货锁额扣除时限商家未售出，所有赊货锁额将从商户月扣除给您</p>
    <button class="btn" @click="submitClick">{{btnText}}</button>
  </div>
</template>

<script>
import {
  FIND_STOCK_ORDER_INFO,
  FIND_STOCK_GOODS_INFO,
  FIND_SHOP_GOODS_INFO,
  FIND_SHOP_PLATFORM_TYPE_LIST_API,
  FIND_SHOP_EXPRESS_TEMPLATE_LIST,
  ADD_STOCK_GOODS_API,
  UPDATE_GOODS_SHELF,
  CANCEL_GOODS_CHECK
} from '@/api'
import { getCurrentPageParams } from '@/utils'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {},
      goods: {},
      swiperList: [],
      swiperList2: [],
      shopTypeIndex: 0,
      goodsTypeName: '请选择',
      goodsExpressList: [],
      goodsExpressIndex: 0,
      goodsExpressName: '请选择',
      orderType: ''
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    btnText () {
      if (this.orderType === 'shop') {
        return '下架商品'
      } else if (this.orderType === 'check') {
        return '取消审核'
      } else {
        return '完成'
      }
    },
    isAddInit () {
      if (this.$cookie.get('choose-goods-type')) {
        return true
      } else {
        return false
      }
    },
    orderForm () {
      return {
        ...this.form
      }
    },
    formList () {
      return [
        {
          label: '供货价',
          isInput: true,
          valie: this.form.stockSupplyCost,
          key: 'stockSupplyCost',
          isShow: false,
          isShowMoney: '',
          slot: '元',
          disabled: this.orderType !== 'type'
        },
        {
          label: '供货库存',
          isInput: true,
          valie: this.form.stockSupplyNum,
          key: 'stockSupplyNum',
          isShow: false,
          isShowMoney: '',
          slot: '件',
          disabled: this.orderType !== 'type'
        },
        {
          label: '最大进货库存',
          isInput: true,
          valie: this.form.maxStockNum,
          key: 'maxStockNum',
          isShow: false,
          isShowMoney: '',
          slot: '件',
          disabled: this.orderType !== 'type'
        },
        {
          label: '运费模板',
          isInput: false,
          valie: this.form.expressId,
          key: 'expressId',
          isShow: false,
          isShowMoney: '',
          slot: '元',
          disabled: this.orderType !== 'type'
        },
        {
          label: '赊货锁额比例',
          isInput: true,
          valie: this.form.stockCreditPre,
          key: 'stockCreditPre',
          isShowMoney: true,
          showMoneyValue:
            this.form.stockSupplyNum *
            this.form.stockSupplyCost *
            (this.form.stockCreditPre * 0.01),
          slot: '%',
          disabled: this.orderType !== 'type'
        }
      ]
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
    this.orderType = getCurrentPageParams('orderType')
    this.getGoodsExpressList()
    if (getCurrentPageParams('orderType') === 'type') {
      this.getAddShopInfo()
    } else if (getCurrentPageParams('orderType') === 'shop' || getCurrentPageParams('orderType') === 'check') {
      this.getStockGoodsInfo()
    } else {
      this.getStockOrderInfo()
    }
  },
  methods: {
    handleStateChange (e) {
      const vm = this
      vm.shopTypeIndex = e.target.value
      vm.goodsTypeName = vm.swiperList2[e.target.value].goodsTypeName
      vm.form.goodsPlatformTypeId = vm.swiperList2[e.target.value].id
    },
    handleExpressChange (e) {
      const vm = this
      vm.goodsExpressIndex = e.target.value
      vm.goodsExpressName = vm.swiperList2[e.target.value].expressName
      vm.form.expressId = vm.swiperList2[e.target.value].expressId
    },
    submitClick () {
      const vm = this
      if (vm.orderType === 'shop') {
        vm.$dialog('确认下架此商品', '').then(() => {
          vm.updateGoodsShelf()
        })
      } else if (vm.orderType === 'check') {
        vm.$dialog('确认取消此商品审核', '').then(() => {
          vm.cancelGoodsCheck()
        })
      } else {
        vm.$dialog('确认添加此商品', '').then(() => {
          vm.addStockGoodsApi()
        })
      }
    },
    init () {
      const vm = this
      vm.form = {}
      vm.goods = {}
      vm.swiperList = []
      vm.swiperList2 = []
      vm.shopTypeIndex = 0
      vm.goodsTypeName = '请选择'
      vm.goodsExpressList = []
      vm.goodsExpressIndex = 0
      vm.goodsExpressName = '请选择'
      vm.getDisShopList()
    },
    /** api **/
    addStockGoodsApi () {
      const vm = this
      let params = { ...vm.form }
      params.goodsKind = 'NORMAL'
      ADD_STOCK_GOODS_API(params)
        .then(r => {
          if (r.data.code === '0') {
            let label = '已发起上架申请，等待审核'
            let btnText = '点击查看'
            vm.$router.push(
              `/pages/data-analyze/stock/succeed/main?label=${label}&btnText=${btnText}&type=type`
            )
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    updateGoodsShelf () {
      const vm = this
      let params = {
        isShelf: '0',
        shopId: vm.form.shopId,
        state: '1'
      }
      params.goodsNoList = []
      params.goodsNoList.push(vm.form.goodsNo)
      UPDATE_GOODS_SHELF(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('下架商品成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    cancelGoodsCheck () {
      const vm = this
      let params = {
        isShelf: '0',
        shopId: vm.form.shopId,
        state: '1'
      }
      params.goodsNoList = []
      params.goodsNoList.push(vm.form.goodsNo)
      CANCEL_GOODS_CHECK(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('下架商品成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getDisShopList () {
      const vm = this
      // let params = []
      // params.push(vm.form.goodsNo)

      // FIND_SHOP_PLATFORM_TYPE_LIST_API(params, vm.form.shopId)
      let params = {
        providerId: vm.$store.state.account.providerId,
        isShow: '1', // 1/0 显示/隐藏
        parentId: 0
      }
      FIND_SHOP_PLATFORM_TYPE_LIST_API(params)
        .then(r => {
          if (r.data.code === '0') {
            r.data.data.forEach(_ => {
              _.length = 0
              vm.getDisShopList2(_)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getDisShopList2 (item) {
      const vm = this
      let params = {
        providerId: vm.$store.state.account.providerId,
        isShow: '1', // 1/0 显示/隐藏
        parentId: item.id
      }
      FIND_SHOP_PLATFORM_TYPE_LIST_API(params)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data.length) {
              let length = r.data.data.length
              item.length = length
            }
            vm.swiperList.push(item)
            r.data.data.forEach((e, i) => {
              if (e.id === vm.$cookie.get('choose-goods-type')) {
                vm.shopTypeIndex = i
                vm.goodsTypeName = e.goodsTypeName
                vm.form.goodsPlatformTypeId = e.id
              }
              vm.swiperList2.push(e)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getAddShopInfo () {
      const vm = this
      FIND_SHOP_GOODS_INFO(
        getCurrentPageParams('goodsNo') || '364827378272174080'
      )
        .then(r => {
          if (r.data.code === '0') {
            vm.goods = r.data.data
            vm.form = { ...r.data.data }
            for (let i = 0; i < vm.swiperList2.length; i++) {
              if (vm.swiperList2[i].id === vm.form.goodsPlatformTypeId) {
                vm.shopTypeIndex = i
                vm.goodsTypeName = vm.swiperList2[i].goodsTypeName
                break
              }
            }
            for (let i = 0; i < vm.goodsExpressList.length; i++) {
              if (vm.goodsExpressList[i].expressId === vm.form.expressId) {
                vm.goodsExpressIndex = i
                vm.goodsExpressName = vm.goodsExpressList[i].expressName
                break
              }
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getGoodsExpressList () {
      const vm = this
      // FIND_SHOP_EXPRESS_TEMPLATE_LIST(vm.$store.state.account.shopId)
      FIND_SHOP_EXPRESS_TEMPLATE_LIST(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.goodsExpressList = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getStockOrderInfo () {
      const vm = this
      FIND_STOCK_ORDER_INFO(
        getCurrentPageParams('goodsNo') || '414096436796325888'
      )
        .then(r => {
          if (r.data.code === '0') {
            let obj = {}
            if (r.data.data) {
              obj = r.data.data.orderGoodsList
                ? r.data.data.orderGoodsList[0]
                : {}
            }
            vm.form = { ...r.data.data, ...obj }
            if (!vm.form.goodsNo) {
              return false
            }
            // vm.getStockGoodsInfo(vm.form.orderNo) // 20200309注释了
            vm.getGoodsInfo(vm.form.goodsNo)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getStockGoodsInfo (goodsNo) {
      const vm = this
      FIND_STOCK_GOODS_INFO(goodsNo || getCurrentPageParams('goodsNo'))
        .then(r => {
          if (r.data.code === '0') {
            vm.goods = r.data.data
            vm.form = { ...r.data.data }
            for (let i = 0; i < vm.swiperList2.length; i++) {
              if (vm.swiperList2[i].id === vm.form.goodsPlatformTypeId) {
                vm.shopTypeIndex = i
                vm.goodsTypeName = vm.swiperList2[i].goodsTypeName
                break
              }
            }
            for (let i = 0; i < vm.goodsExpressList.length; i++) {
              if (vm.goodsExpressList[i].expressId === vm.form.expressId) {
                vm.goodsExpressIndex = i
                vm.goodsExpressName = vm.goodsExpressList[i].expressName
                break
              }
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getGoodsInfo (goodsNo) {
      const vm = this
      FIND_SHOP_GOODS_INFO(goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            // 销售数量
            if (r.data.data) {
              if (r.data.data.saleNum) {
                let { saleNum } = r.data.data
                vm.saleNum = saleNum
              } else {
                vm.saleNum = 0
              }
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  // height: auto;
  background: #f6f8f9;
  > .top {
    width: 100%;
    background: #fff;
    > img {
      width: 100%;
      height: 260px;
    }
    > span {
      font-size: 14px;
      color: #000;
      font-weight: 600;
      display: block;
      width: 90%;
      margin: auto;
      line-height: 40px;
    }
  }
  > .zhan {
    height: 10px;
  }
  > .list {
    width: 100%;
    background: #fff;
    > .cont {
      width: 90%;
      height: 40px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-size: 14px;
      > .right {
        display: flex;
        align-items: center;
        > .filter-picker {
          color: #000;
          > .pitch-on {
            color: #838383;
          }
        }
      }
    }
  }
  > .list2 {
    width: 100%;
    background: #fff;
    margin-bottom: 20px;
    > .cont {
      width: 100%;
      border-bottom: 1px solid #f4f6f8;
      > div {
        width: 90%;
        height: 40px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        > .right {
          display: flex;
          align-items: center;
          > input {
            text-align: right;
            color: #000;
            margin-right: 5px;
          }
          > span {
            color: #838383;
          }
          > .filter-picker {
            color: #000;
            > .pitch-on {
              color: #838383;
            }
          }
        }
      }
      > .showPre {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > div {
          display: flex;
          align-items: center;
          > input {
            width: 50px;
            text-align: left;
            color: #000;
            margin-left: 5px;
          }
        }
        > p {
          color: #838383;
        }
      }
    }
  }
  > .hintText {
    width: 90%;
    margin: auto;
    font-size: 12px;
    color: #ef341c;
  }
  .btn {
    width: 95%;
    margin: 50px auto;
    height: 45px;
    font-size: 14px;
    color: #fff;
    line-height: 45px;
    border-radius: 25px;
    background: linear-gradient(to right, $new-red-tint, $new-red-dark);
  }
}
</style>
